<template>
  <el-button plain @click="centerDialogVisible = true" style="background-color: white;color: red;border: none;">
    待付款
  </el-button>
  <el-dialog
    v-model="centerDialogVisible"
    width="800"
    align-center
  >
  <div class="main">
	  <div class="main-1">
		  <div class="title">
			  未来蜂支付
		  </div>
		  <div class="pay">
			  <div class="pay1">
			  			   应支付金额：
			  </div>
			  <div class="pay2">
			  			{{pay[0].price}}
			  </div>
			  <div class="pay3">
				  元
			  </div>
		  </div>
		  <div class="selectpay">
			  <selectpay
				:price="props.price"
				:goodOfUserId="props.goodOfUserId"></selectpay>
		  </div>
	  </div>
  </div>				
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="trade" style="background-color: red;color: white; border: none;">
          支付
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script  setup>
import { ref } from 'vue';
import { Path } from "@/constant/index"
import { get,post } from "@/plugins/axios"
import { useUserStore } from '@/stores/pinia'
const userStore = useUserStore()
import selectpay from '@/views/function-zjm/selectpay.vue'
const props = defineProps(["price","goodOfUserId","id","goodsId","count"])
const centerDialogVisible = ref(false);
const emits = defineEmits(["getOrders"])
const pay=ref([
	{
	id:null,
  price:props.price,
	},
]); 
getMyCount()
function getMyCount(){
	get(Path.userGetAccount,{
	},content => {})
}
function trade(){
	// 先进行转账，如果成功了，那么就将这个有关的订单重数据库中改为已支付，删除在删除函数中进行
	post(Path.userTrade,{
		to: props.goodOfUserId,
		count: props.price,
		id:props.id,
		goodsId: props.goodsId,
		sum: props.count
	},content => {
		if(content){
			centerDialogVisible.value = false;
		// 	setTimeout(function() {  
    //     location.reload();   
    // }, 500);  
		  emits("getOrders")
		}
	})
}
</script>
<style scoped lang="scss">
	.main{
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: center;
		.main-1{
			
			box-shadow: 0px 0px 10px rgba(0,0,0,0.75); 
			height: 420px;
			width: 700px;
			.title{
				color: #ff0000;
				font-weight: 900;
				font-size: 35px;
				height: 15%;
				display: flex;
				
				background-color: #ffefee;
				width: 180px;
				border-radius:0px 0px 20px 0px ;
			}
			.pay{
				display: flex;
			margin-left: 50%;
			.pay1{
				font-size: 30px;
				margin-top: 2%;
				
			}
			.pay2{
				color: #ff0000;
				font-size: 40px;
			}
			.pay3{
				font-size: 30px;
				margin-top: 2%;
				}
			}
			.selectpay{
				
				margin-left: 3%;
			}
		}
	}
</style>